<template>
    <el-dialog
        :title="getDialogTag()"
        :width="width"
        :visible="dialogVisible"
        :destroy-on-close="true"
        :modal-append-to-body="true"
        :before-close="handleClose"
    >
        <el-form
            ref="dataForm"
            class="dialog-cls"
            :style="isScroll ? isScrollCls : ''"
            :model="dataForm"
            :rules="dataFormRules"
            :label-width="labelwidth"
            :disabled="dialogTag && dialogTag === 'see'"
            size="small"
        >
            <span v-for="(item, index) in dialogConfig" :key="index">
                <el-form-item :label="item.title" :prop="item.code">
                    <el-input
                        v-if="item.type === 'input' || item.type === 'textarea' || item.type === 'password'"
                        v-model.trim="dataForm[item.code]"
                        :style="{ width: item.width }"
                        :type="item.type"
                        :placeholder="item.placeholder"
                        :maxlength="item.maxlength ? item.maxlength : 20"
                        :show-word-limit="item.type === 'textarea'"
                        :disabled="dialogTag === item.disabled || item.disabled === true"
                        :autocomplete="item.type === 'password' ? 'new-password' : 'off'"
                    />
                    <el-radio-group
                        v-model="dataForm[item.code]"
                        :disabled="dialogTag === item.disabled || item.disabled === true"
                        v-if="item.type === 'radio'"
                    >
                        <el-radio :label="1">{{ item.yesText ? item.yesText : '是' }}</el-radio>
                        <el-radio :label="0">{{ item.noText ? item.noText : '否' }}</el-radio>
                    </el-radio-group>
                    <el-input-number
                        v-if="item.type === 'number'"
                        :disabled="dialogTag === item.disabled || item.disabled === true"
                        v-model="dataForm[item.code]"
                        :style="{ width: item.width }"
                        controls-position="right"
                        :min="0"
                        style="display: block"
                    />
                    <el-select
                        v-if="item.type === 'select'"
                        v-model="dataForm[item.code]"
                        placeholder="请选择"
                        class="width100"
                        :disabled="dialogTag === item.disabled || item.disabled === true"
                    >
                        <el-option
                            v-for="optionItem in item.options"
                            :key="optionItem.value || optionItem[item.valueName]"
                            :label="optionItem.label || optionItem[item.labelName]"
                            :value="optionItem.value || optionItem[item.valueName]"
                        ></el-option>
                    </el-select>
                    <el-date-picker
                        v-if="item.type === 'datetimerange'"
                        v-model="dataForm[item.code]"
                        :style="{ width: item.width }"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:00']"
                        style="float: left; width: 100%"
                        :disabled="dialogTag === item.disabled || item.disabled === true"
                        @change="handleDate"
                    ></el-date-picker>
                    <el-date-picker
                        v-if="item.type === 'datetime'"
                        v-model="dataForm[item.code]"
                        :style="{ width: item.width }"
                        type="datetime"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="option"
                        :disabled="dialogTag === item.disabled || item.disabled === true"
                        style="float: left; width: 100%"
                    />
                    <slot v-if="item.slot" :name="item.slot">slot</slot>
                </el-form-item>

                <!-- <el-form-item  :label="item.title" :prop="item.code">
                </el-form-item> -->
                <!-- <el-form-item  :label="item.title" :prop="item.code">
                </el-form-item> -->
                <!-- <el-form-item :label="item.title" :prop="item.code"></el-form-item>
                <el-form-item  :label="item.title" :prop="item.code">
                </el-form-item> -->
                <!-- <el-form-item :label="item.title" :prop="item.code"></el-form-item> -->
                <!-- <el-form-item :label="item.title" :prop="item.code"></el-form-item> -->
            </span>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="size" @click.native="closeDialog">取消</el-button>
            <el-button :size="size" type="primary" :loading="editLoading" @click.native="handleSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
/***
 * eidtTag : "edit" "add" :"see"
 * isScroll
 */
import { dialogVisible } from '@/mixins/dialogMixin'
// import utils from '@/utils/utils'
// const { confirm, deepClone, isNumber, isArray, isString, isObject } = utils
export default {
    components: {},
    mixins: [dialogVisible],
    props: {
        dataForm: {
            type: Object,
            default: () => {
                return {}
            }
        },
        dialogTag: {
            type: String,
            default: ''
        },
        editLoading: {
            type: Boolean,
            default: false
        },
        dialogConfig: {
            typpe: Array,
            default: () => {
                return []
            }
        },
        dataFormRules: {
            type: Object,
            default: () => {
                return {}
            }
        },
        isScroll: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '50%'
        },
        labelwidth: {
            type: String,
            default: '200px'
        }
    },
    data() {
        return {
            // dataEdit: this.dataForm,
            size: 'mini',
            range: '',
            editH: '600',
            isScrollCls: {
                'min-height': '200px',
                'overflow-y': 'scroll',
                'max-height': '450px'
            },
            option: {
                disabledDate: (time) => {
                    return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
                }
            }
        }
    },
    watch: {
        // dataForm: function() {
        //     this.data = deepClone(this.dataForm)
        // }
    },
    methods: {
        getDialogTag() {
            const { dialogTag, title } = this
            if (!dialogTag) {
                return title
            }
            if (dialogTag === 'edit') {
                console.log('edit')
                return '编辑'
            } else if (dialogTag === 'add') {
                return '新增'
            } else if (dialogTag === 'see') {
                return '查看'
            } else {
                return title
            }
        },
        // handleClose() {
        //     this.$refs['dataForm'].resetFields()
        //     this.$emit('update:editDialogVisible', false)
        //     Object.keys(this.dataForm).forEach(key => {
        //         this.dataForm[key] = ''
        //     })
        // },
        handleSubmit() {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.dataForm)
                    console.log('入参：：：：', params)
                    this.$emit('submitForm', params)
                }
            })
        },
        handleDate() {}
    }
}
</script>
<style lang="scss">
.dialog-cls {
    padding-right: 35px;
    .el-form-item__label {
        width: 20% !important;
    }
    .el-form-item__content {
        margin-left: 22% !important;
    }
    .el-textarea__inner {
        min-height: 120px !important;
    }
}
</style>
